<template>
  <div class="more">
    <div class="right">
      <span class="icon" @click="showSidePanel">
        <i class="iconfont iconstbar_gengduo"></i>
      </span>
    </div>
    <bc-modal v-show="getShowSidePanel" ref="modal">
      <transition name="slide">
        <div class="side-slider" v-show="getShowSidePanel" ref="contents">
          <div class="slider-content">
            <div class="title border-bottom">
              <span class="icon">
                <i class="iconfont more iconstbar_gengduo"></i>
              </span>
              <span class="icon" @click="hideSidePanel">
                <i class="iconfont close iconty_guanbi"></i>
              </span>
            </div>
            <div class="content-wrapper">
              <div class="item border-bottom" v-for="item in sidePanelItems" :key="item.id">
                <span class="icon">
                  <i class="iconfont" :class="item.icon"></i>
                </span>
                <span class="context">
                  {{item.context}}
                </span>
              </div>
              <div class="item border-bottom">
                <span 
                  class="icon last" 
                  @click="toggleSound"
                  :class="isSoundOn ? 'red' : 'dark'"
                  >
                  <i class="iconfont" 
                    :class="isSoundOn ? 'iconindex_tishiyin_kai' : 'iconindex_tishiyin_guan'"
                    >
                  </i>
                </span>
                <span class="context">
                  提示音
                </span>
                <span class="hint" :class="isSoundOn ? 'on' : 'off'">({{isSoundOn ? '开' : '关'}})</span>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </bc-modal>
  </div>
</template>

<script>
import BcModal from '@/components/base/bc-modal/bc-modal'
import {mapMutations, mapGetters} from 'vuex'
export default {
  components: {
    BcModal
  },
  data() {
    return {
      sidePanelItems: [
        {
          id: 1,
          context: '充值',
          icon: 'icongd_chongzhi',
          path: ''
        },
        {
          id: 2,
          context: '提现',
          icon: 'icongd_chongzhi',
          path: 'icongd_tixian'
        },
        {
          id: 3,
          context: '订单',
          icon: 'icongd_weijiedingdan',
          path: ''
        },
        {
          id: 4,
          context: '追号记录',
          icon: 'icongd_zhuihaojilu',
          path: ''
        },
        {
          id: 6,
          context: '走势图',
          icon: 'icongd_zoushitu',
          path: ''
        },
        {
          id: 7,
          context: '玩法说明',
          icon: 'icongd_wanfashuoming',
          path: ''
        },
        {
          id: 8,
          context: '在线客服',
          icon: 'icongd_zaixiankefu',
          path: ''
        },
        // {
        //   id: 9,
        //   context: '提示音',
        //   icon: 'iconindex_tishiyin_kai',
        // }
      ],
      isSoundOn: true
    }
  },
  mounted() {
    this.modal = this.$refs.modal.$el 
    this.contents = this.$refs.contents 
    this.modal.addEventListener('click', (e) => {
      if (!this.contents.contains(e.target)) {
        this.setShowSidePanel(false)
      }
    })
  },
  destroyed() {
    this.modal.removeEventListener('click', (e) => {
      if (!this.contents.contains(e.target)) {
       this.setShowSidePanel(false)
      }
    })
  },
  methods: {
    showSidePanel() {
      this.setShowSidePanel(true)
    },
    hideSidePanel() {
      this.setShowSidePanel(false)
    },
    toggleSound() {
      this.isSoundOn = !this.isSoundOn
    },
    handleGoBack() {
      this.$router.back(-1)
    },
    ...mapMutations('lottery', {
      setShowSidePanel: 'SET_SHOW_SIDE_PANEL'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getShowSidePanel'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .more 
    .icon 
      extend-click()
      .iconfont 
        font-size 20px
    .side-slider 
      position absolute
      top 0
      right 0
      bottom 0 
      width 45%
      background-color #fff
      height 100%
      color $color-theme-dark
      &.slide-enter-active, &.slide-leave-active
        transition: all 0.2s
      &.slide-enter, &.slide-leave-to
        transform: translate3d(100%, 0, 0)
      .slider-content
        .title
          display flex 
          justify-content space-between 
          width 100% 
          line-height 48px
          box-sizing border-box 
          padding 0 17px
          background $color-text-button
          .icon
            color $color-theme-red
            height 48px
            box-sizing border-box
            extend-click()
            .iconfont 
              font-size 25px
              &.more 
                color $color-theme-dark
        .content-wrapper 
          .item 
            height 45px
            line-height 45px
            bos-sizing border-box 
            padding 0 10px
            &:nth-child(2)
              .iconfont 
                color $color-ball-green
            &:nth-child(1) 
              .iconfont 
                color $color-theme-red
            &:last-child 
              display flex
              align-items center
              .hint
                margin-left 10px 
                &.on 
                  color $color-theme-red
                &.off 
                  color $color-theme-dark
              .icon 
                display inline-block
                height 16px 
                width 16px
                line-height 15px
                border-radius 50% 
                background $color-theme-red
                display flex 
                align-items center
                justify-content center
                margin-right 15px
                &.red
                  background $color-theme-red
                &.dark 
                  background $color-theme-dark
                .iconfont 
                  color #fff
                  font-size 10px
            .icon 
              margin-right 10px
              
              




</style>